<template>
  <header class="fixed w-full z-30 bg-white shadow-3xl">
    <div class="max-w-320 mx-auto px-4 sm:px-6">
      <div class="flex items-center justify-between h-20">
        <!-- Site branding -->
        <div class="shrink-0">
          <!-- Logo -->
          <router-link to="/" class="block" aria-label="Cruip">
            <img class="w-32" src="/src/images/logo.jpg" alt="" />
          </router-link>
        </div>

        <!-- Desktop navigation -->
        <nav class="hidden lg:flex lg:grow">
          <!-- Desktop menu links -->
          <ul class="flex grow flex-nowrap items-center justify-center font-medium poppins-font space-x-2">
            <template v-for="(item, index) in navigationItems" :key="index">
              <Dropdown
                class="nav-li"
                :title="item.title"
                :items="item.children"
                v-if="item.children"
              />
              <li v-else class="nav-li" :class="{ 'nav-li-active': route.path === item.toUrl }">
                <router-link :to="item.toUrl" class="px-2 py-2 flex items-center">
                  {{ item.title }}
                </router-link>
              </li>
            </template>
          </ul>

          <!-- Desktop CTA on the right -->
          <ul class="flex justify-end flex-wrap items-center">
            <li>
              <router-link
                to="/contact-us"
                class="btn-sm text-white bg-red-650 hover:bg-red-800 ml-6"
                >Get Quote
              </router-link>
            </li>
          </ul>
        </nav>

        <!-- Mobile menu -->
        <div class="inline-flex lg:hidden">
          <!-- Hamburger button -->
          <button
            class="hamburger"
            ref="hamburger"
            :class="{ active: mobileNavOpen }"
            aria-controls="mobile-nav"
            :aria-expanded="mobileNavOpen"
            @click="mobileNavOpen = !mobileNavOpen"
          >
            <span class="sr-only">Menu</span>
            <svg
              class="w-6 h-6 fill-current text-gray-900 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition duration-150 ease-in-out"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect y="4" width="24" height="2" rx="1" />
              <rect y="11" width="24" height="2" rx="1" />
              <rect y="18" width="24" height="2" rx="1" />
            </svg>
          </button>

          <!-- Mobile navigation -->
          <transition
            enter-active-class="transition ease-out duration-200 transform"
            enter-from-class="opacity-0 -translate-x-full"
            enter-to-class="opacity-100 translate-x-0"
            leave-active-class="transition ease-out duration-200"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
          >
            <nav
              v-show="mobileNavOpen"
              id="mobile-nav"
              ref="mobileNav"
              class="fixed top-0 h-screen z-20 left-0 w-full max-w-sm -ml-16 overflow-scroll bg-white dark:bg-gray-900 shadow-lg no-scrollbar"
            >
              <div class="py-6 pr-4 pl-20">
                <!-- Logo -->
                <router-link to="/" class="inline-block mb-4" aria-label="Cruip">
                  <svg class="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                      <linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="menulogo_a">
                        <stop stop-color="#3ABAB4" offset="0%" />
                        <stop stop-color="#7F9CF5" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="menulogo_b">
                        <stop stop-color="#3ABAB4" offset="0%" />
                        <stop stop-color="#3ABAB4" stop-opacity="0" offset="100%" />
                      </linearGradient>
                    </defs>
                    <path
                      d="M32 16h-8a8 8 0 10-16 0H0C0 7.163 7.163 0 16 0s16 7.163 16 16z"
                      fill="url(#menulogo_a)"
                    />
                    <path
                      d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16h8a8 8 0 1016 0h8z"
                      fill="url(#menulogo_b)"
                    />
                  </svg>
                </router-link>
                <!-- Links -->
                <ul>
                  <li>
                    <router-link
                      to="/about"
                      class="flex text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 py-2"
                    >
                      About
                    </router-link>
                  </li>
                  <li>
                    <router-link
                      to="/blog"
                      class="flex text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 py-2"
                    >
                      Blog
                    </router-link>
                  </li>
                  <li>
                    <router-link
                      to="/testimonials"
                      class="flex text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 py-2"
                    >
                      Testimonials
                    </router-link>
                  </li>
                  <li class="py-2 my-2 border-t border-b border-gray-200 dark:border-gray-800">
                    <span class="flex text-gray-600 dark:text-gray-400 py-2">Resources</span>
                    <ul class="pl-4">
                      <li>
                        <router-link
                          to="/help"
                          class="text-sm flex font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 py-2"
                        >
                          Help center
                        </router-link>
                      </li>
                      <li>
                        <router-link
                          to="/404"
                          class="text-sm flex font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 py-2"
                        >
                          404
                        </router-link>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <router-link
                      to="/contact"
                      class="font-medium w-full inline-flex items-center justify-center border border-transparent px-4 py-2 my-2 rounded text-white bg-teal-500 hover:bg-teal-400 transition duration-150 ease-in-out"
                    >
                      Request code
                    </router-link>
                  </li>
                </ul>
              </div>
            </nav>
          </transition>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRoute } from 'vue-router'
import Dropdown from '/src/components/common/Dropdown/Dropdown.vue'

const route = useRoute()
const mobileNavOpen = ref(false)

const navigationItems = ref([
  { title: 'Home', toUrl: '/' },
  {
    title: 'Services',
    toUrl: '',
    children: [
      { title: 'CNC Machining', toUrl: '/cnc-machining' },
      { title: 'Plastic Injection Molding', toUrl: '/plastic-injection-molding' },
      { title: 'Rapid Tooling Making', toUrl: '/rapid-tooling' },
      { title: 'Rapid Prototyping', toUrl: '/rapid-prototyping' },
      { title: 'Compression Molding', toUrl: '/compression-molding' },
      { title: 'Sheet Metal', toUrl: '/sheet-metal' },
      {
        title: 'Industries',
        toUrl: '',
        children: [
          { title: 'Automotive Industry', toUrl: '/industries/automotive' },
          { title: 'Aerospace Industry', toUrl: '/industries/aerospace' },
          {
            title: 'Medical Device and Dental Industry',
            toUrl: '/industries/medical-device-and-dental'
          },
          { title: 'Consumer Products Industry', toUrl: '/industries/consumer-products' },
          { title: 'Security Industry', toUrl: '/industries/security' },
          { title: 'Robotics Industry', toUrl: '/industries/robotics' }
        ]
      }
    ]
  },
  {
    title: 'Quality Control',
    toUrl: '',
    children: [
      { title: 'Inspection Process', toUrl: '/inspection-process' },
      { title: 'GD&T', toUrl: '/gdt' },
      { title: 'Equipment List', toUrl: '/equipment-list' },
      { title: 'Certificates', toUrl: '/certificates' }
    ]
  },
  {
    title: 'Resources',
    toUrl: '',
    children: [
      { title: 'Case Studies', toUrl: '/case-studies' },
      { title: 'Blogs', toUrl: '/blogs' },
      { title: 'FAQs', toUrl: '/faqs' }
    ]
  },
  { title: 'About Us', toUrl: '/about-us' },
  { title: 'Contact Us', toUrl: '/contact-us' }
])

function clickOutside(e) {
  if (!mobileNavOpen.value || e.target.closest('.mobile-nav') || e.target.closest('.hamburger'))
    return
  mobileNavOpen.value = false
}

function keyPress(event) {
  if (!mobileNavOpen.value || event.keyCode !== 27) return
  mobileNavOpen.value = false
}

onMounted(() => {
  document.addEventListener('click', clickOutside)
  document.addEventListener('keydown', keyPress)
  document.documentElement.classList.remove('dark')
})

onBeforeUnmount(() => {
  document.removeEventListener('click', clickOutside)
  document.removeEventListener('keydown', keyPress)
})
</script>

<style>
.poppins-font {
  font-family: 'Poppins', Sans-serif, serif;
  font-size: 18px;
  font-weight: 400;
}

.nav-li {
  position: relative;
  color: #343638;
}

.nav-li:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  background-color: #55595c;
  width: 100%;
  height: 2px;
  opacity: 0;
}

.nav-li:hover {
  color: #c00000;
}

.nav-li:hover:after {
  opacity: 1;
}

.nav-li-active {
  color: #c00000;
}

.nav-li-active:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  background-color: #55595c;
  width: 100%;
  height: 2px;
  opacity: 1;
}
</style>
